<template>
	<view class="container">
		<view class="data-time">
			<picker mode="date" fields="month" :value="selectedMonth" @change="bindDateChange">
				<view class="picker-box">
					<image :src="`${$ImgBaseUrl}ServiceOrderTimeIcon.png`" mode="" class='ServiceOrderTimeIcon'></image>
					<view class="picker-input">{{ formattedMonth }}</view>
					<image :src="`${$ImgBaseUrl}servide-order-triangle.png`" mode="" class='servide-order-triangle'>
					</image>
				</view>
			</picker>
		</view>
		<view class="content">
			<uni-collapse>
				<!-- 遍历格式化后的订单 -->
				<uni-collapse-item titleBorder="none" title-border='none' style="background-color: #f5f5f5"
					v-for="item in formattedOrders" :key="item.serviceTime">
					<template v-slot:title>
						<view class="title-box">
							{{ formatDisplayDate(item.serviceTime) }} <text>{{ item.totalCount }}</text> 单
						</view>
					</template>
					<view class="collapse-content">
						<view class="price-box">
							收入
							<text>{{ item.totalIncome}}</text>
						</view>
						<view class="drop"></view>

						<!-- 遍历该日期下的所有订单 -->
						<view class="order-item" v-for="(order, index) in item.orderServices" :key="order.id">
							<view class="left-content">
								<view class="order-type">{{ order.title }}</view>
								<view class="status not-arrived" v-if="order.settlementStatus==='NO'">未到账</view>
								<view class="status arrived" v-else>已到账</view>
							</view>
							<view class="order-info">
								<view class="order-date">{{ formatDisplayDate(order.createTime) }}</view>
								<view class="order-address">{{ order.address }}</view>
							</view>
							<view class="order-amount">￥{{ order.actualAmount }}</view>
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>

			<!-- 空状态显示 -->
			<view v-if="isEmpty" class="empty">
				暂无订单数据
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		options: {
			styleIsolation: 'shared',
		},
	}
</script>
<script setup>
	import {
		ref,
		computed,
		onMounted
	} from 'vue'
	import {
		ImgBaseUrl
	} from "@/utils/domain.js";
	import {
		ServiceOrderList
	} from '@/api/serviceOrder.js'
	import {
		onShow
	} from '@dcloudio/uni-app';

	// 已完成订单列表（子组件自行维护）
	const orderList = ref([]);
	// 选中的月份（格式：YYYY-MM）
	const selectedMonth = ref(getCurrentMonth());

	// 初始化：获取当前年月（格式 'YYYY-MM'）
	function getCurrentMonth() {
		const date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1; // 月份从0开始，需+1
		month = month > 9 ? month : '0' + month; // 补零（如：5→05）
		return `${year}-${month}`;
	}

	// 格式化显示的月份（用于UI展示，如：2025-07）
	const formattedMonth = computed(() => {
		if (!selectedMonth.value) return '';
		const [year, month] = selectedMonth.value.split('-');
		return `${year}-${month.padStart(2, '0')}`;
	});

	// 拆分年份和月份（用于接口参数）
	const getYearAndMonth = () => {
		const [year, month] = selectedMonth.value.split('-');
		return {
			year: Number(year), // 转换为数字类型（如：2025）
			month: Number(month) // 转换为数字类型（如：7）
		};
	};

	// 日期选择变化时重新请求数据
	function bindDateChange(e) {
		selectedMonth.value = e.target.value; // 更新选中的月份
		fetchCompletedOrders(); // 切换月份后重新请求
	}

	// 核心：请求已完成订单（status=2，携带year和month参数）
	const fetchCompletedOrders = async () => {
		try {
			// 获取拆分后的年份和月份
			const {
				year,
				month
			} = getYearAndMonth();
			// 接口参数：status=2（已完成）+ 年份 + 月份
			const params = {
				status: 2,
				year: year, // 单独传入年份（数字类型）
				month: month // 单独传入月份（数字类型）
			};
			const res = await ServiceOrderList(params);
			orderList.value = res.data || []; // 保存接口返回的订单数据
			console.log('orderList.value', orderList.value);
		} catch (error) {
			console.error('获取已完成订单失败', error);
			uni.showToast({
				title: '获取数据失败',
				icon: 'none'
			});
		}
	};

	// 格式化订单数据（按日期分组）
	const formattedOrders = computed(() => {
		// 加强过滤：确保 item 包含 serviceTime、totalCount、orderServices（且 orderServices 是数组）
		return orderList.value.filter(item =>
			item?.serviceTime && // 存在日期
			typeof item?.totalCount === 'number' && // 订单数是数字
			Array.isArray(item?.orderServices) // 订单列表是数组
		) || [];
	});
	// 计算是否为空数据
	const isEmpty = computed(() => {
		return formattedOrders.value.length === 0;
	});

	// 格式化日期显示（如 '2025-07-11' → '2025年7月11日'）
	function formatDisplayDate(dateString) {
		if (!dateString) return '';
		try {
			const date = new Date(dateString);
			// 验证日期有效性（避免Invalid Date）
			if (isNaN(date.getTime())) return dateString;
			return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
		} catch (error) {
			console.warn('日期格式化失败', dateString, error);
			return dateString; // 格式化失败时返回原始字符串
		}
	}

	// 组件挂载和显示时请求数据（默认加载当月数据）
	onMounted(() => {
		fetchCompletedOrders();
	});
	onShow(() => {
		// fetchCompletedOrders(); // 从后台返回时重新请求，确保数据最新
	});
</script>

<style lang="scss" scoped>
	/* 样式保持不变 */
	.container {
		background-color: #f5f5f5;
		padding: 20rpx 20rpx;
		box-sizing: border-box;

		.data-time {
			border-radius: 10rpx;
			width: 100%;
			background-color: #fff;

			.picker-box {
				display: flex;
				align-items: center;
				justify-content: center;

				.picker-input {
					height: 70rpx;
					line-height: 70rpx;
					width: 20% !important;
					text-align: center;
					color: #333;
					font-size: 28rpx;
					font-weight: 400;
				}
			}
		}
	}

	.content {
		width: 100%;
		height: 100%;
		color: #333;

		.empty {
			text-align: center;
			padding: 40rpx;
			// color: #999;
		}

		.collapse-content {
			min-height: 300rpx;
			padding: 20rpx;
			box-sizing: border-box;
			justify-content: space-between;
			display: flex;
			flex-direction: column;
			border-radius: 20rpx;
			background-color: #fff;

			.drop {
				width: 100%;
				border: 1rpx dashed #e2e2e2;
				margin: 20rpx 0rpx;
			}

			.price-box {
				display: flex;
				align-items: center;
				font-size: 30rpx;
				color: #333333;
				font-weight: 400;

				text {
					font-size: 38rpx;
					color: #333333;
					font-weight: bold;
					margin-left: 10rpx;

					&::before {
						content: "￥";
						font-size: 24rpx;
						margin-right: 4rpx;
					}
				}
			}

			.order-item {
				display: flex;
				flex-direction: column;
				padding: 15rpx 0;
				border-bottom: 1px solid #eee;
				height: 160rpx;
				justify-content: space-between;
				margin-bottom: 20rpx;

				&:last-child {
					border-bottom: none;
					margin-bottom: 0 !important;

				}

				.left-content {
					display: flex;
					justify-content: space-between;
					gap: 8rpx;
				}

				.order-type {
					font-size: 30rpx;
					color: #333;
					font-weight: 500;
				}

				.status {
					font-size: 30rpx;
					font-weight: 400;

					&.not-arrived {
						color: #FF6A47;
					}

					&.arrived {
						color: #6BC98D;
					}
				}

				.order-info {
					font-size: 24rpx;
					color: #999;
					display: flex;
					gap: 20rpx;
				}

				.order-amount {
					font-size: 30rpx;
					color: #333;
					font-weight: 500;
					text-align: left;
				}
			}
		}
	}

	::v-deep .uni-collapse-item__wrap-content.uni-collapse-item--border {
		border: none !important;
	}

	::v-deep .uni-collapse-item__wrap {
		background-color: transparent !important;
	}

	.title-box {
		color: #333333;
		font-size: 28rpx;
		font-weight: 400;
		display: flex;
		padding: 0rpx 20rpx;
		box-sizing: border-box;
		height: 100rpx;
		align-items: center;
		background-color: #f5f5f5;

		text {
			color: #FF6A47;
			font-size: 36rpx;
			font-weight: 500;
			margin: 0 5rpx;
		}
	}

	::v-deep .uni-date__x-input {
		color: #333 !important;
		font-size: 28rpx !important;
	}

	.ServiceOrderTimeIcon {
		width: 30rpx;
		height: 30rpx;
	}

	.servide-order-triangle {
		width: 17rpx;
		height: 8rpx;
	}
</style>